<template>
  <!-- 用户管理 -->
  <div>
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header" @click="handleBack" class="clearfix manage_header userManage_header">
        <!-- 返回 -->
        <i></i>
        <span>返回</span>
      </div>
      <!-- 新增用户 -->
      <div class="manage_user">
        <el-card>
          <h1>用户管理</h1>
          <!-- 下拉 -->
          <el-select v-model="xiala" class="xiala" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div class="manage_right">
            <el-input placeholder="用户名搜索" suffix-icon="el-icon-search" v-model="search"></el-input>
            <el-button class="user_btn add_user" @click="addClick">
              <i></i>新增用户
            </el-button>
            <el-button class="user_btn del_user" @click="del_user">
              <i></i>删除用户
            </el-button>
          </div>
          <!-- 表格 -->
          <el-table
            :header-cell-style="{background:'#E9F4FD',color:'#212121',fontSize:'22px'}"
            class="user_table"
            :data="userData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="uuid" label="唯一标识"></el-table-column>
            <el-table-column prop="iphone" label="手机号"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="vip_type" label="会员等级" :formatter="stateFormat"></el-table-column>
            <el-table-column prop="vip_start_time" label="开启时间">
              <template
                v-if="scope.row.vip_start_time!=null"
                slot-scope="scope"
              >{{scope.row.vip_start_time| dateYMDHMSFormat}}</template>
            </el-table-column>
            <el-table-column prop="vip_end_time" label="到期时间">
              <template
                v-if="scope.row.vip_end_time !=null"
                slot-scope="scope"
              >{{scope.row.vip_end_time| dateYMDHMSFormat}}</template>
            </el-table-column>
            <el-table-column prop label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
                <el-tooltip class="item" effect="dark" content="修改密码" placement="top">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleModify(scope.$index, scope.row)"
                  >操作</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="fenye"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[1,2]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalRecords"
          ></el-pagination>
          <!-- 模态框 -->
          <el-dialog
            class="delete"
            :visible.sync="Isdelete"
            :showClose="showClo=false"
            width="661px"
          >
            <i @click="Isdelete= false"></i>
            <i></i>
            <h2>删除该条反馈</h2>
            <p>
              啦啦啦，问题修好了吗？修好的话就点击确定按
              <br />钮，删除之前请再次确认是否修复完成。
            </p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleSure">确 定</el-button>
              <el-button @click="Isdelete = false">取 消</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="修改密码"
            :visible.sync="IsModify"
            :before-close="handleClose"
            width="661px"
          >
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
              </el-form-item>-->
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-card>
      </div>
    </el-card>
    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    // 密码
    var validatePass = (rule, vall, callback) => {
      if (vall === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, vall, callback) => {
      if (vall === "") {
        callback(new Error("请再次输入密码"));
      } else if (vall !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      search: '',
      searchType:'',
      loading: true,
      userData: [],
      page: {
        pageNo: 1, //当前页
        pageSize: 1, //每页条数,  默认10条
        totalRecords: 0, //总条数
        totalPages: 0 //总页数
      },
      // 点击修改修改密码
      IsModify: false,
      // 索引
      index: "",
      // 是否删除模态框
      Isdelete: false,
      token: this.$route.query.token,
      // 下拉框数据
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      // 点击修改密码关闭按钮
      // handleClose: false,
      xiala: "",
      // 密码
      ruleForm: {
        pass: "",
        checkPass: ""
        // age: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
    // 密码
  },

  mounted() {
    this.$axios
      .post("http://47.105.140.58:8081/login/findPage", {
        search: this.search, // 搜索条件、
        searchType:this.searchType, // 类型
        pageSize: this.page.pageSize, // 每页数据
        pageNo: this.page.pageNo  //当前页
      })
      .then(res => {
        const data = res.data;
        console.log(res);
        this.page.pageSize = data.pageSize;
        this.userData = data.content;
        this.page.totalRecords = data.totalSize;
        this.loading = false;
      });
  },

  methods: {
    stateFormat(row, column) {
      if (row.vip_type === null) {
        return "无";
      } else if (row.vip_type === "1") {
        return "月会员";
      } else if (row.vip_type === "2") {
        return "季会员";
      } else if (row.vip_type === "3") {
        return "年会员";
      }
    },
    handleBack() {
      // console.log(1);
      this.$router.go(-1)
    },
    handleClick(row) {
      //this.$router.push({path: '/management',query : {token : data.token}})
      this.$router.push({
        path: "/modify_user",
        query: { token: this.token, id: row.uuid }
      }); 
    },
    addClick() {
      // this.$router.replace("/management");
      this.$router.push({
        path: "/management",
        query: { token: this.token }
      });
    },
    handleSizeChange(val) {
      this.$axios
        .post("http://47.105.140.58:8081/login/findPage", {
          search: this.search, // 搜索条件、
          totalRecords: this.page.totalRecords,
          pageSize: val,
          pageNo: this.page.pageNo
        })
        .then(res => {
          const data = res.data;
          this.page.totalRecords = data.totalSize;
          console.log(this.page.totalRecords);
          this.page.pageSize = data.pageSize;
          this.page.pageNo = data.pageNum;
          this.userData = data.content;
          this.loading = false;
        });
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.$axios
        .post("http://47.105.140.58:8081/login/findPage", {
          search: this.search, // 搜索条件、
          totalRecords: this.page.totalRecords,
          pageSize: this.page.pageSize,
          pageNo: val
        })
        .then(res => {
          const data = res.data;
          this.page.totalRecords = data.totalSize;
          this.page.pageSize = data.pageSize;
          this.page.pageNo = data.pageNum;
          this.userData = data.content;
          this.loading = false;
        });
      console.log(`当前页: ${val}`);
    },
    // 点击删除按钮
    handleDelete(index, row) {
      console.log(index, row);
      this.Isdelete = true;
      this.index = index;
      // console.log(this.index);
    },
    // 点击总删除按钮
    del_user() {
      // console.log(1);
      this.Isdelete = true;
    },
    // 点击复选按钮
    handleSelectionChange(val) {
      console.log(val);
    },
    // 点击确认
    handleSure() {
      this.Isdelete = false;
      console.log(this.index);
      let that = this;
      this.$confirm("确认删除？")
        .then(_ => {
          that.userData.splice(this.index, 1);
        })
        .catch(_ => {});
    },
    // 点击操作按钮
    handleModify() {
      this.IsModify = true;
    },
    // 点击修改密码模态框确认
    submitForm(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].validate(valid => {
        console.log(valid);

        if (valid) {
          // alert('submit!');
          this.IsModify = false;
          this.$refs[formName].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      console.log(formName);
      
      this.$refs[formName].resetFields();
    },
    // 点击修改密码模态框关闭按钮
    handleClose(done) {
      this.$refs['ruleForm'].resetFields()
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 点击保存
    handleModify() {
      console.log(111);
      
    }
  }
};
</script>

<style>
/* 头部 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.manage_header {
  margin: 10px 0 10px 30px;
  position: relative;
}
.manage_header i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_header span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.manage_user .el-card__header {
  padding: 0;
}
.userManage_header {
  padding-bottom: 24px;
}
/* 表格部分 */
.manage_user h1 {
  font-weight: 700;
  font-size: 32px;
  color: #4c4c4c;
  display: inline-block;
  margin: 0;
}
.manage_user .el-input {
  width: 276px;
  height: 40px;
}
.user_btn {
  width: 112px;
  height: 40px;
  border-radius: 5px;
  color: #fff;
  border: none;
}
.manage_right {
  float: right;
}
.manage_right .el-input {
  margin-right: 24px;
}
.add_user {
  background: #ff3c00;
}
.del_user {
  background: #bdbdbd;
}
.user_table {
  margin-top: 32px;
}

.fenye {
  margin-top: 40px;
  text-align: center;
}
.fenye .el-input {
  width: 52px;
  height: 32px;
}
.user_table {
  font-size: 18px;
  color: #212121;
}
.user_table .el-button {
  font-size: 18px;
  color: #212121;
}
.user_table .el-table td,
.user_table .el-table th {
  text-align: center;
}

/* 模态框 */
.el-dialog {
  position: relative;
}
.delete i:nth-child(1) {
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  width: 40px;
  height: 40px;
  background: url("../assets/img/close.png") no-repeat;
  background-size: 40px;
}
.delete i:nth-child(2) {
  display: block;
  margin: 0 auto;
  width: 38px;
  height: 38px;
  background: url("../assets/img/garbage.png") no-repeat;
  background-size: 38px;
}
.delete h2 {
  font-size: 24px;
  font-weight: 400;
  color: #212121;
  text-align: center;
  margin: 0;
  margin: 20px 0 28px;
  line-height: 47px;
}
.delete p {
  text-align: center;

  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #757575;
}
.dialog-footer {
  margin: 0 50px 76px;
}
.dialog-footer .el-button {
  width: 240px;
  height: 47px;
  font-size: 18px;
  margin-bottom: 50px;
}
.dialog-footer .el-button:nth-child(1) {
  background: url("../assets/img/btn.png") no-repeat;
  background-size: 240px 47px;
  border: none;
  color: #fff;
}
.dialog-footer .el-button:nth-child(2) {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.xiala .el-input {
  top: -7px;
  right: -200px;
  margin-right: 50px;
  width: 200px;
  height: 36px;
}
.Qpw {
  margin-left: 65px;
}

</style>
